<link rel="stylesheet" th:href="@{/lib/vertical_timeline/css/style.css}" />
<section id="container">
    <div class="ces-hgruop">
    	<div class="ces-header">
    		<div class="ces-cell">
    			<img style="width:168px;height:200px;" th:src="${live.coverImage}" />
    		</div>
    		<ul class="ces-cell mid-cell" style="height:100%;">
    			<li class="ces-logo"><img class="circle-image " style="width:30px;height:30px;" th:src="${liveAdmin.avatar}" /></li>
    			<li th:utext="${live.topic} + ' 【时光轴】'">直播标题</li>	
    			<li th:text="${live.description}"></li>	
    			<li><a th:href="@{'/live/pcbroadcast/' + ${live.id} + '/book'}">切换至【回忆录】视图 - POWERED BY 范客生活</a></li>	
    		</ul>
    		<div class="ces-cell ces-code">
    			<img th:src="@{/src/img/wechatbarcode.png}" /> <span>微信扫一扫关注范客</span>
    		</div>
    	</div>
    </div>
    <div class="cd-container ces-live clearfix">
    	<div class="ces-date">
    		<div class="pos-fix" id="posfix">
    			<div class="ces-tit">
    				<div class="ces-1">
    					<span>时光轴</span>
    				</div>
    			</div>		
    			<span th:each="liveDate : ${liveDateRange}"> 
    			       <input type="radio" name="cesDate" th:id="${'cesdate' + liveDate.dayString}" th:value="${liveDate.dayString}" /> 
    			       <label th:for="${'cesdate' + liveDate.dayString}" th:text="${liveDate.dateString}"></label>			       
    			</span>
    			<!--span> <input type="radio" name="cesDate" id="cesdate3"
    				value="27" /> <label for="cesdate3">2015-05-27</label>
    			</span> <span> <input type="radio" name="cesDate" id="cesdate2"
    				value="26" /> <label for="cesdate2">2015-05-26</label>
    			</span> <span> <input type="radio" name="cesDate" id="cesdate1"
    				value="25" /> <label for="cesdate1">2015-05-25</label>
    			</span-->
    		</div>
    	</div>
    	<div class="ces-msg" id="cd-timeline">
    		<div class="ces-tit">
    			<div class="ces-2">
    				<span>直播区</span> 
    				<a href="#" class="refresh" id="refresh-live"
    					th:onclick="'javascript:refresh();return false;'" title="刷新消息"><i
    					class="fa fa-refresh"></i></a>
    			</div>
    		</div>
    		<div class="cd-timeline-block" th:if="${timelines.size()>0}"
    			th:each="timeline : ${timelines}">
    			<div class="cd-timeline-img cd-picture">
    				<img th:src="@{/lib/vertical_timeline/img/cd-icon-location.svg}" alt="Location" />
    			</div>
    			<div class="cd-timeline-content">
    				<h2>
    					<img class="circle-image " style="width:30px;height:30px;" th:src="${timeline.user.avatar}" />
    					<span th:utext="${timeline.user.name} + '@' + ${live.topic} + ':'"></span>
    				</h2>
    				<div >
    					<p th:utext="${timeline.content.text}">范客直播</p>
    					<div th:each="tiImg : ${timeline.content.url}" >
    						<video th:if="${#strings.endsWith(tiImg,'mp4') == true}" controls="" width="640">
    							<source th:src="${tiImg}" type="video/mp4" />Your browser does not support HTML5 video.
    						</video>
    					    <img th:if="${#strings.endsWith(tiImg,'mp4') == false}" th:src="${tiImg}" alt="范客直播" />
    					    <br/>
    					    <br/>
    					    <br/>
    					</div>

        				<a href="#0" class="cd-read-more" title="分享" id="share-panel"> <i
        					class="fa fa-share-alt"></i>分享
        				</a> <span class="cd-date"
        					th:text="${#dates.format(timeline.date, 'yyyy-MMM-dd HH:mm')}">2015-05-25</span>
        				<span class="qDate"
        					th:attr="data-date=${#dates.day(timeline.date)}"
        					style="display: none"
        					th:text="${#dates.year(timeline.date)} + '.' + ${#dates.month(timeline.date)} + '.' + ${#dates.day(timeline.date)} + ' ' + ${#dates.hour(timeline.date)} + ':' + ${#dates.minute(timeline.date)} + ':' + ${#dates.second(timeline.date)}">2015.05.25
        					00:00:00</span>
        			</div>
        		</div>
        	</div>
        </div>
    </div>
</section>
<script type="text/javascript" charset="utf-8" th:inline="javascript">
bShare
    .addEntry({
        title: " [来自范客生活的" + [[${live.topic}]] + "直播]",
        summary: "快到范客生活来看" + [[${live.topic}]] + "直播吧，跟朋友分享有更多好礼等着你哦。",
        vUid: "4905443",
        vEmail: "contact@faxsun.com",
        vTag: 'FAXSUN'
    });
</script>
<script th:src="@{/lib/vertical_timeline/js/main.js}"></script>
<script th:inline="javascript">
var checkAnyNewId;
$(document).ready(function() {
    $("#refresh-live").hide();
    var checkAnyNewFlag = [[${checkAnyNew}]]
    if(checkAnyNewFlag){
       checkAnyNewId = setInterval(checkAnyNew, 300000);    	
    }
});

//var pathArray = window.location.pathname.split('/');
//var context = pathArray[1];
var checkNewUrl = [[${ctx}]] + '/live/pcbroadcast/' + [[${live.id}]] + '/checkAnyNew';

var refresh = function() {
    window.location.href = [[${ctx}]] + '/live/pcbroadcast/' + [[${live.id}]] + '/timeline';
};

var checkAnyNew = function() {
    $.ajax({
        type: "POST",
        data: {
            "startMsgId": [[${startMsgId}]]
        },
        url: checkNewUrl,
        success: function(data) {
            if (data == 'true') {
                $("#refresh-live").show();
                clearInterval(checkAnyNewId);
            } else {
                $("#refresh-live").hide();
            }
        },
        error: function(xhr, error) {
            alert(error + "-更新出错，请稍后再试");
        }
    });
}
</script>
